<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

	<title></title>
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<style type="text/css">
		body{
			background: #f1e5cd;
			padding-bottom: 40px;
		}
		.banner{
			padding: 0 20px;
		}
		.banner img{
			padding: 0 20px;
			margin-bottom: 15px;
		}

		.input-box{

			padding: 45px;
		}
		.input-box input{
			font-size: 1.6rem;
			border-radius: 5px;
			padding: 8px;
			margin-bottom: 15px;
			border-top: 1px solid #d2c6af;
			border-left: 1px solid #d2c6af;
		}
		.input-box .btn{
			text-align: center;
			padding: 8px;
			border-radius: 5px;
			box-shadow: 0 3px 0 #dfa90e;
			background: #facd08;
		}
		.input-box img{
			width: 40px;
			padding-top: 10px;
			float: right;
		}
	</style>
</head>
<body>
	<section class="banner">
		<img src="images/001.png">
		<div>请填写推荐人绑定资金账号的手机号码，我们将
尽快进行开通信息核实，并发送积分至好友的东
方证券公众号账户中。</div>
	</section>
	<section class="input-box">
		<input type="text">
		<div class="btn">确定</div>
		<img src="images/logo.png">
	</section>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	var textAlert={
	  init:function(text){
	   var html="<section id=textAlert style='position:fixed; display:table; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.15)'>"
	      +"<div style='display:table-cell; vertical-align:middle;'>"
	        +"<div style='width:70%; background:#fff; text-align:center; padding:20px; margin:0 auto; border-radius:5px; font-size:1.8rem;'>"+text+"</div>"
	      +"</div>"
	    +"</section>";
	    $("body").append(html);
	    this.remove();
	  },
	  remove:function(){
	    $("body").on("click","#textAlert",function(){
	      $(this).remove();
	    })
	    
	  }
	}


	$(".input-box").on("click",".btn",function(){
		var phone=$(".input-box input").val();
		if(!/^1(3|5|7|8)[0-9]{9}$/.test(phone)){
			textAlert.init("请输入正确手机号码！")
			return;
		}
	})
</script>
</body>
</html>